<template>
	<view class="login-outer">
		
		<view class="login-box">
			<view class="welcome">
				<view class="slogan">欢迎登录</view>
				
				<view class="platform">智慧海星教育平台终端</view>
				<view class="select" @click="activeName='1'"></view>
			</view>
			<view class="top-menu">
				<u-tabs :list="topMenu" lineWidth="90" class="top-menu" :activeStyle="{
				    color: '#303133',
					fontSize:'7.81rpx',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#606266',
					fontSize:'7.81rpx',
				    transform: 'scale(1)'
				}" @click="clickTab"></u-tabs>
			</view>

			<template v-if="activeName==0">
				<view class="entering">
					<view class="kuangde">
						<input type="tel" class="zhangsa" required v-model="loginForm.phone" placeholder="请输入手机号" />
					</view>
					<view class="kuangde inptmasi">
						<input type="number" class="zhangsa ahudana" v-model="loginForm.msecode" required placeholder="请输入验证码" />
						<view class="gangshu"></view>
						
						<view class="statuszhaung" >
							<view  :style="{display:isCountDown?'block':'none'}">
								<u-count-down  ref="countDown"  @change="onChangeTime" :time="60 * 1000" format="ss" :autoStart="false"></u-count-down>
							</view>
							
							<view class="btn-scode"  @click="getScan" v-if='isCountDown==false'>获取验证码</view>
						</view>
						
					</view>
				</view>
				<view class="dahxmd" @click="handleLogin">
					<text v-if="!loading">登 录</text>
					<text v-else>登 录 中...</text>
				</view>
				<view class="device-test">
					设备号：{{deviceId}}
				</view>
			</template>

			<template v-if="activeName==1">
				<view class="scanTo"></view>
			</template>

		</view>
	</view>
</template>

<script>
	import {fetchData,repeatFun,SetBaseStatus} from '../../utils/request';
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
				errorInfo: '',
				isCountDown:false,  // 是否正在倒计时
				activeName: '0', //phone 1  ; scan 2
				topMenu: [{
					name: '手机号登录',
				}, {
					name: '二维码登录',
				}],
				loginForm: {
					phone: "",
					msecode: "",
					userType:'01'  //老师的身份
				},
				activeName: 0, //phone 0  ; scan 1
				codeUrl: "",
				loading: false
			};
		},
		computed:{
			...mapState(['deviceId'])
		},
		methods: {
			
			clickTab(obj) {
				this.activeName = obj.index;
			},
			getScan(){
				if(!/^\d{11}/.test(this.loginForm.phone)){
					uni.$u.toast('请输入正确的手机号')
					return;
				}
				  
				fetchData({
					url:`/mse/alimse/sendMse/${this.loginForm.phone}`,
					method: 'post',
					data: this.loginForm
				}).then((res) => {
					if(res.code==200){
						this.isCountDown = true;
						this.$refs.countDown.start();	
					}	
				}) 
			},
			onChangeTime(e){
				this.timeData = e;
				if(e.seconds==0){
					this.isCountDown = false;
					this.$refs.countDown.reset();
				}	
			},
			handleLogin() {
				SetBaseStatus(this.deviceId);
				this.loginForm.machine = this.deviceId;
				fetchData({
					url: '/auth/loginPhone2',
					method: 'post',
					data: this.loginForm
				}).then((res) => {
					if (res.code == 200) {
						
						let {ipaddr} = res.data.userInfo;
						const {status,classId,schoolId,eduId,eduLevel,gradeName,className,schoolName,currentMode,startT,eduT} = res.data.userInfo.comClassInfo
						uni.setStorageSync('token', res.data.token.access_token);
				
						this.$store.commit('setSlassID',classId);
						this.$store.commit('setSchoolId',schoolId);
						this.$store.commit('setUserInfo',{ipaddr,classId,schoolId,eduId,eduLevel,gradeName,className,schoolName,currentMode});
						 		
						if(classId) {
							this.$store.commit('setPowerTime',{startT,eduT});
							// 轮训接口
							repeatFun();
							uni.navigateTo({
								url: '/pages/index/index'
							})
						}
						
					} else {
						this.errorInfo = res.msg;
						uni.$u.toast(res.msg)
					}

				})
			},
			submit() {

				// this.$refs.uForm.validate().then(res => {
				// 	uni.$u.toast('校验通过')
				// }).catch(errors => {
				// 	uni.$u.toast('校验失败')
				// })
			}
		}
		
	}
</script>

<style lang="scss">
	.login-outer {
		background: url($imageurl+'/login/loginBack.png') left top no-repeat;
		width: 100vw;
		height: 100vh;
		background-size: cover;
		position: relative;
		//#ifdef APP-PLUS
		 overflow: hidden;
		//#endif
	}

	.login-box {
		position: absolute;
		background: #fff;
		position: absolute;
		right: 117.19upx; 
		top: 50%;
		transform: translateY(-50%);
		border-radius: 30px;
		background: rgba(255, 255, 255, 0.8);
		width: 195.31upx;
		padding: 15.72upx;
		box-shadow: 0 0 12px 0 rgba(43, 189, 207, 0.26);
	}
	.welcome {
		width: 100%;
		height: 44upx;
		display: flex;
		align-items: flex-end;
		user-select: none;
		margin-bottom: 7.81upx;
	}

	.welcome {
		width: 100%;
		height: 17.19upx;
		display: flex;
		align-items: flex-end;
		user-select: none;
		align-items: center;
	}

	.welcome>.slogan {
		height: 17.19upx;
		font-size: 11.72upx;
		font-weight: 600;
		color: #000000;
		line-height: 16.41upx;
	}

	.welcome>.platform {
		font-size: 7.81upx;
		font-weight: 400;
		color: #949494;
		line-height: 8.98upx;
		
		padding-left:5.86upx;
	}

	.welcome .select {
		position: absolute;
		width: 54.69upx;
		height: 54.69upx;
		top: 10.16upx;
		right: 10.94upx;
		background-image: url($imageurl+"/login/QRcode.png");
		background-size: cover;
	}


	.entering {
		width: 100%;
	}

	.kuangde {
		width: 172.66upx;
		height: 24.22upx;
		border: 1px solid rgba(113, 203, 240, 1);
		border-radius: 8px;
		overflow: hidden;
	}

	.zhangsa {
		width: 98%;
		height: 100%;
		outline: none;
		padding: 0.78rpx 5.47upx;
		letter-spacing: 2px;
		font-size: 7.81upx;
		font-weight: 400;
		color: #333333;
		line-height: 8.98upx;
		box-sizing: border-box;
		border: none;
	}

	.ahudana {
		flex: 1;
	}

	.top-menu {
		margin-bottom: 11.72upx;
	}

	.zhangsa::placeholder {
		font-size: 20px;
		font-weight: 400;
		color: #CDCDCD;
		letter-spacing: 1px;
	}

	.zhangsa:after {
		content: '1';
	}

	.inptmasi {
		margin-top: 7.81upx;
	}

	.inptmasi {
		display: flex;
		align-items: center;

	}

	.gangshu {
		width: 0;
		height: 14.45upx;
		opacity: 1;
		border: 1px solid #C1C1C1;
	}

	.statuszhaung {
		width: 53.91upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 7.81upx;
		font-weight: 400;
		color: #6B6464;
	}

	.dahxmd {
		width: 172.66upx;
		height: 24.22upx;
		background: linear-gradient(180deg, #A6F7DE 0%, #70CBF3 100%);
		box-shadow: inset 0 0 6px 0 rgba(22, 123, 165, 0.22);
		border-radius: 31px 31px 31px 31px;
		margin-top: 24.22upx;
		font-size: 9.11upx;
		font-weight: 500;
		color: #05242F;
		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
	}

	.scanTo {
		width: 104.69upx;
		height: 104.69upx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		background-color: #5a5e66;

		img {
			width: 91.41upx;
			height: 91.41upx;
			background-color: #4A4A4A;
		}
	}
	
	.u-count-down__text {
		font-size:8.25rpx!important;
	}
	.btn-scode {
		font-size:7.81upx;
	}
	.device-test { text-align: center; padding-top:8upx; }
</style>